<template>
  <div>
    <!--导航-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="userVO" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select clearable v-model="userVO.departmentId" placeholder="请选择">
            <el-option
              v-for="item in depts"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                 <el-tag type="success" effect="plain">{{ item.deptCount }}</el-tag>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input clearable v-model="userVO.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input clearable v-model="userVO.email"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="70px">
          <el-radio v-model="userVO.sex" label="0">帅哥</el-radio>
          <el-radio v-model="userVO.sex" label="1">美女</el-radio>
          <el-radio v-model="userVO.sex" label="2">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input clearable v-model="userVO.nickname"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="70px" style="margin-left: 10px;">
          <el-button type="primary" icon="el-icon-refresh" @click="resetUserVO">重置</el-button>
          <el-button type="success" icon="el-icon-search" @click="getUserList">查询</el-button>
          <el-button type="info" icon="el-icon-plus" @click="show">添加</el-button>
          <el-button type="danger" icon="el-icon-dwonload">导出</el-button>
        </el-form-item>
        <!--表单内容-->
        <el-table
          :data="userList"
          max-height="400"
          border
          style="width: 100%;">
          <el-table-column
            prop="id"
            label="#"
            width="50">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="110">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="110">
            <template slot-scope="scope">
              <span class="el-tag el-tag--success el-tag--mini el-tag--light"> {{scope.row.sex==0 ? '帅哥':(scope.row.sex ==1)? '美女':'保密'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dname"
            label="所属部门"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="birth"
            sortable
            label="生日"
            width="180">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phoneNumber"
            label="电话"
            width="150">
          </el-table-column>
          <el-table-column
            prop="status"
            label="是否禁用"
            width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status==1"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-delete"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-s-tools"></el-button>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          style="padding: 5px; width: 100%;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 10, 20, 30, 40, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!--子组件-->
        <UserAdd  :departments="depts" :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></UserAdd>
      </el-form>

    </el-card>
  </div>
</template>

<script>
  import {findUserList} from '../../api/users'
  import {findDeptAndCount} from '../../api/depts'
  // 引入子组件
  import UserAdd from './UserAdd'

  export default {
    name: 'User',
    data() {
      return {
        userVO: {
          departmentId: '',
          username: '',
          email: '',
          sex: '2',
          nickname: ''
        },
        depts: [], // 部门集合
        userList: [], // 用户集合
        currentPage: 1, //当前页面
        total: 100, // 总记录数
        size: 6, // 每页大小
        addOrUpdateVisible: false // 是否显示
      }
    },
    mounted() {
      // 页面加载时调用
      this.getUserList()
      this.getDeptAndCount()
    },
    methods: {
      onSubmit() {
        // console.log('submit!')
      },
      //每页条数改变
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.size = val
        //重新查询
        this.getUserList()
      },
      // 页码改变
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val
        this.getUserList()
      },
      /**
       *  调用 api 获取 用户集合
       * @returns {Promise<void>}
       */
      async getUserList() {
        const {data} = await findUserList(this.currentPage, this.size, this.userVO)
        console.log(data)
        this.userList = data.data.records
        this.total = data.data.total
      },
      async getDeptAndCount() {
        const {data} = await findDeptAndCount()
        console.log(data)
        this.depts = data.data.deps
      },
      resetUserVO() {
        this.userVO.departmentId = ''
        this.userVO.username = ''
        this.userVO.email = ''
        this.userVO.sex = '2'
        this.userVO.nickname = ''
        this.getUserList();
      },
      show() {
        this.addOrUpdateVisible = true;
      },
      showAddOrUpdate(data) {
        if (data === 'false') {
          this.addOrUpdateVisible = false;
        } else {
          this.addOrUpdateVisible = true;
        }
      }
    },
    components: {
      // 申明子组件
      UserAdd,
    }
  }
</script>

<style scoped>

</style>
